<template>
    <view class="lottery-page">  

        
        <!-- 头部区域 -->
        <view class="header">
            <image src="https://admin.cqycgyl.com/uploads/20251010/c2f0f02a32d0e2848b4c4f6999e08b47.png"></image>
        </view>

        <!-- 九宫格抽奖区域 -->
        <view class="lottery-section">

            <view v-for="(item, index1) in 2" :key="index1">
                <view v-if="index1==0">
                    <!-- 横向点 -->
                     <view class="dot" :class="{'active':index%2==0}" v-for="(item, index) in 7" :key="index" :style="{left: 70+index*86+'rpx',top: '8rpx'}"></view>
                     <view class="dot" :class="{'active':index%2==0}" v-for="(item, index) in 7" :key="index" :style="{left: 70+index*86+'rpx',bottom: '8rpx'}"></view>
                </view>
                <view v-if="index1==1">
                    <!-- 纵向点 -->
                    <view class="dot" :class="{'active':index%2==1}" v-for="(item, index) in 7" :key="index" :style="{left: '8rpx',top: 70+index*86+'rpx'}"></view>
                    <view class="dot" :class="{'active':index%2==1}" v-for="(item, index) in 7" :key="index" :style="{right: '8rpx',top: 70+index*86+'rpx'}"></view>
                </view>
            </view>
           
            <view class="lottery-grid">
                <view class="grid-item" v-for="(item, index) in grid" :class="{'active':index == winingIndex}" :key="index" >
                    <view class="prize-item" v-if="index+1 !== 9">
                        <image :src="item.img" class="prize-image" mode="aspectFit"></image>
                        <text class="prize-name">{{ item.name }}</text>
                    </view>
                    <view class="draw-button" v-else @click="start" style="z-index: 999;  " :hidden="lock">
                        <view class="draw-content">
                            <image style="width: 132rpx; height: 132rpx" src="https://admin.cqycgyl.com/uploads/20251010/9c470198e18214fbb4eb79351c3d3229.png"></image>
                            <text class="draw-chances">{{ drawChances }}次机会</text>
                        </view>
                        <view class="hand-icon">
                            <image style="width: 212rpx; height: 212rpx" src="https://admin.cqycgyl.com/uploads/20251010/8ca9ffd52c509963cd03db91317ab3e7.png"></image>
                        </view>
                    </view>
                </view>                                            
            </view>
        </view>

        <!-- 中奖记录区域 -->
        <view class="prize-record">
            <view class="record-header" @click="goToRecord">
                <text class="record-title">• 中奖记录 •</text>
                <text class="view-more">查看更多</text>
            </view>
            <view class="record-grid">
                <view class="record-item" v-for="(record, index) in prizeRecords" :key="index">
                    <image :src="record.img" class="record-image" mode="aspectFit"></image>
                    <text class="record-name">{{ record.name }}</text>
                </view>
            </view>
        </view>

        <!-- 抽奖说明区域 -->
        <view class="rules-section">
            <text class="rules-title">• 抽奖说明</text>
            <view class="rules-list">
                <view class="rule-item" v-for="(rule, index) in lotteryRules" :key="index">
                    <text class="rule-number">{{ index + 1 }}.</text>
                    <text class="rule-text">{{ rule }}</text>
                </view>
            </view>
        </view>

        <!-- 底部广告横幅 -->
        <view class="ad-banners">
           
        </view>

        <!-- 中奖覆盖层 -->
        <view class="prize-overlay" v-if="showPrizeOverlay" @click="closePrizeOverlay">
            <view class="overlay-content" @click.stop>
                <!-- 头像区域 -->
                <view class="avatar-section">
                    <image :src="vuex_user.user_avatar || '/static/images/avatar.png'" class="user-avatar"></image>
                    <view class="confetti confetti-1"></view>
                    <view class="confetti confetti-2"></view>
                    <view class="confetti confetti-3"></view>
                    <view class="confetti confetti-4"></view>
                </view>
                
                <!-- 恭喜文字 -->
                <view class="congratulations-text">
                    <text class="congrats-title">{{ getCongratsTitle() }}</text>
                </view>
                
                <!-- 奖品展示区域 -->
                <view class="prize-display-section">
                    <!-- 谢谢惠顾类型 -->
                    <view v-if="wonPrize.prize_type == 4" class="thank-you-section">
                        <view class="thank-you-icon">😊</view>
                        <text class="thank-you-text">谢谢惠顾</text>
                    </view>
                    
                    <!-- 购物券类型 -->
                    <view v-else-if="wonPrize.prize_type == 3" class="coupon-section">
                        <image :src="wonPrize.img" class="prize-main-image" mode="aspectFit"></image>
                        <view class="coupon-amount">
                            <text class="amount-text">￥{{ wonPrize.value }}</text>
                        </view>
                    </view>
                    
                    <!-- 实物奖品类型 -->
                    <view v-else class="prize-section">
                        <image :src="wonPrize.img" class="prize-main-image" mode="aspectFit"></image>
                    </view>
                </view>
                
                <!-- 操作按钮 -->
                <view class="redeem-button" @click="goToRedeem">
                    <text class="redeem-text">{{ getButtonText() }}</text>
                </view>
                
                <!-- 说明文字 -->
                <view class="redeem-tip" v-if="wonPrize.prize_type != 4">
                    <text class="tip-text">可前往"商城"兑换商品</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            lock: false,
            interval: 100,
            count: 36,
            total: 36,
            origin: 0,
            audioContext: null,
            audioSrc: 'https://admin.cqycgyl.com/uploads/20250929/0b914254e3452ca491fa453be2046df3.mp3',    
            target: 5,        
            targetOffset: 0,
            drawChances: 100, // 抽奖次数
            step: 0,
            showPrizeOverlay: false, // 控制中奖覆盖层显示
            wonPrize: {}, // 中奖的奖品信息
            winAudio: null,
            winingIndex: 0,
            isShaking: false, // 控制页面抖动

            // 九宫格奖品数据（按照图片中的奖品设置）
            grid: [
                
            ],

            // 中奖记录数据
            prizeRecords: [
            ],

            // 抽奖规则
            lotteryRules: [
                '每日首次登录云仓优送小程序,即可获得2次免费抽奖机。',
                '每成功在云仓优送小程序消费一笔,即可获得1次抽奖机会。',
                '每观看30分钟视频,最高可获得1次抽奖机会。'
            ]
        }
    },
    async onLoad() {
        let res = await this.$u.api.index.getPrizeList({user_id: this.vuex_user.user_id});
        console.log('res',res);
        if(res.code==1&&res.data){
            this.grid = res.data.map(item=>({
                id: item.id,
                name: item.prize_name,
                desc: item.description || '恭喜中奖',
                probability: item.odds / 100, // 将百分比转换为小数
                value: item.value,
                prize_type: item.prize_type,
                img: item.prize_image||'',
            }))
        }else{
            uni.showToast({
                title: res.msg || '获取奖品列表失败',
                icon: 'none'
            });
        }
        this.audioContext = uni.createInnerAudioContext();
        this.audioContext.src = this.audioSrc;
        this.grid = this.grid.filter((item,index)=>index<9);
        this.selection = Object.assign([
            this.grid[0], // iPhone 17
            this.grid[1], // 20购物券  
            this.grid[2], // 大牌双肩包
            this.grid[3], // 1购物券
            this.grid[4],         // 抽奖按钮位置
            this.grid[5], // 10购物券
            this.grid[6], // 欧舒丹护手霜
            this.grid[7], // 50购物券
            
              // 小米电饭锅
        ]);

        

      
        await this.getPrizeRecords();

     
    },


    watch:{
        
    },
    methods: {       

        goToRecord() {
            console.log('goToRecord');
            uni.navigateTo({
                url: './record'
            });
            console.log('goToRecord2');
        },
        async getPrizeRecords() {
            let res = await this.$u.api.index.getPrizeRecords({user_id: this.vuex_user.user_id,page:1,limit: 6});
            console.log('res',res);
            if(res.code==1&&res.data){
                this.prizeRecords = res.data.records.map(item=>({
                    name: item.prize_name,
                    img: item.prize_image||'',
                }));
            }
        },
        async start() {
            if(this.lock){
                uni.showToast({
                    title: '请稍后再试',
                    icon: 'none'
                });
                return true;
            }
            this.lock = true;
            
            // 触发页面抖动
            this.isShaking = true;
            let model = uni.getSystemInfoSync().model;
            let res = await this.$u.api.index.getLottery({user_id: this.vuex_user.user_id,model:model});
            if(res.code==1&&res.data){
                this.selection.forEach((item,index)=>{ 
                    if(item.id==res.data.prize.id){
                        this.target = index;
                    }
                 });
                 console.log('目标奖索引',this.target);
            }else{
                uni.showToast({
                    title: res.msg || '获取抽奖结果失败',
                    icon: 'none'
                });
            }

            if (this.drawChances <= 0) {
                uni.showToast({
                    title: '抽奖次数不足',
                    icon: 'none'
                });
                return;
            }
            
            this.drawChances--;
            let resultIndex = (this.origin+36)%8;
            console.log('resultIndex',resultIndex);
            console.log('target',this.target);
            let count = resultIndex>this.target?8-resultIndex+this.target: this.target-resultIndex;
            console.log('count',count);
            this.total = 36+count;
            console.log('total',this.total);
            this.count = this.total;

            this.tick({
                loop: () => {                    
                    
                    this.winingIndex++;
                    this.winingIndex = this.winingIndex%8;
                    console.log('loop',this.winingIndex);
                    uni.vibrateShort({
                        type: 'medium',
                    });

                    new Promise(resolve=>{
                        // 先停止并重置当前播放
                        this.audioContext.stop();
                        this.audioContext.seek(0);
                        this.audioContext.src=this.audioSrc;
                        // 播放完成后 resolve
                        const onEnded = () => {
                            this.audioContext.offEnded(onEnded); // 移除监听避免重复触发
                            resolve();
                        };
                        this.audioContext.onEnded(onEnded);
                        
                        // 执行播放（捕获可能的错误但不阻塞）
                        try {
                            this.audioContext.play()
                        } catch (error) {
                            resolve();
                            console.log('error',error);
                        }
                    });
                 
                },
                result: () => {
                    this.lock = false;
                    this.isShaking = false;
                    console.log(`抽奖结束,索引名：${this.selection[this.target].name}`,this.target);
                    // 显示中奖覆盖层
                    this.wonPrize = this.selection[this.target];
                    console.log('wonPrize',this.wonPrize);
                    new Promise(resolve=>{
                        this.audioContext.stop();
                        this.audioContext.seek(0);

                        this.audioContext.src='https://admin.cqycgyl.com/uploads/win.aac'; //胜利
                        if(this.wonPrize.prize_type == 4){
                            this.audioContext.src='https://admin.cqycgyl.com/uploads/20251014/0ac3a6d4bba16f66d68c2dfdebbb9467.mp3'; //失败
                        }
                        const onEnded = () => {
                         this.audioContext.offEnded(onEnded); // 移除监听避免重复触发
                        resolve();
                        };
                        this.audioContext.onEnded(()=>{
                            this.audioContext.offEnded(onEnded);
                        });
                        
                        try {
                            this.audioContext.play()
                        } catch (error) {
                            resolve();
                            console.log('error',error);
                        }
                    });
                    this.showPrizeOverlay = true;
                    this.getPrizeRecords();
                    this.origin =this.target;
                    
                }
            });
        },
        tick(callbacks) {
            return new Promise((resolve) => {
            // 执行循环回调，同时输出当前间隔时间便于观察
            callbacks.loop();
            
            if (this.count === 1) {
                callbacks.result();
                resolve();
                return;
            }
            
            this.count--;
            
            // 重新划分阶段：前24步加速，后12步减速（总36步）  
            // 加速阶段：count从35到12（共24步）
            if (this.count > 4 && this.count<this.total-4) {
                this.interval -= 20; // 较小的递减幅度，加速更平滑
                // 限制最小间隔为30ms，让高速阶段更快
                if (this.interval < 30) {
                    this.interval = 30;
                }
            } 
            // 减速阶段：count从4到0（共4步）
            else {
                // 减速幅度逐渐增大，让减速更自然
                const deceleration = 5 + (4 - this.count) * 2;
                this.interval = 200;
            }
            
            setTimeout(() => this.tick(callbacks), this.interval);
           
        })
    },
    
    // 关闭中奖覆盖层
    closePrizeOverlay() {
        this.showPrizeOverlay = false;
        this.wonPrize = {};
    },
    
    // 前往兑换
    goToRedeem() {
       
        if(this.wonPrize.prize_type == 4){
            this.closePrizeOverlay();
            return;
        }
        uni.showToast({
            title: '跳转到商城页面',
            icon: 'none'
        });
        // 这里可以添加跳转到商城的逻辑
        uni.switchTab({
            url: '/pages/shop/index'
        });
    },
    
    // 获取恭喜文字
    getCongratsTitle() {
        if (!this.wonPrize || !this.wonPrize.prize_type) {
            return '恭喜你获得奖励';
        }
        
        switch (this.wonPrize.prize_type) {
            case 4: // 谢谢惠顾
                return '很遗憾，下次再来';
            case 3: // 购物券
                return '恭喜你获得购物券';
            case 1: // 实物奖品
            default:
                return '恭喜你获得奖励';
        }
    },
    
    // 获取按钮文字
    getButtonText() {
        if (!this.wonPrize || !this.wonPrize.prize_type) {
            return '前往兑换';
        }
        
        switch (this.wonPrize.prize_type) {
            case 4: // 谢谢惠顾
                return '再来一次';
            case 3: // 购物券
                return '前往使用';
            case 1: // 实物奖品
            default:
                return '前往兑换';
        }
    }
        
    }
}
</script>

<style lang="scss" scoped>
.lottery-page {
    min-height: 100vh;
    background: #ED480D;
    padding-bottom: 40rpx;
}

/* 头部区域 */
.header {
    width: 750rpx;
    height: 606rpx;
    image{
        width: 100%;
        height: 100%;
    }
}



.decorations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.coin {
    position: absolute;
    width: 60rpx;
    height: 60rpx;
    background: radial-gradient(circle, #ffd700, #ffb300);
    border-radius: 50%;
    box-shadow: 0 4rpx 8rpx rgba(255, 215, 0, 0.3);
}

.coin-1 {
    top: 80rpx;
    left: 60rpx;
    animation: float 3s ease-in-out infinite;
}

.coin-2 {
    top: 120rpx;
    right: 80rpx;
    animation: float 3s ease-in-out infinite 1s;
}

.coin-3 {
    top: 200rpx;
    left: 40%;
    animation: float 3s ease-in-out infinite 2s;
}

.gift-box {
    position: absolute;
    bottom: 40rpx;
    right: 60rpx;
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(45deg, #e53935, #d32f2f);
    border-radius: 8rpx;
    box-shadow: 0 4rpx 12rpx rgba(229, 57, 53, 0.3);
}

.gift-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8rpx;
    background: #ffd700;
    transform: translateY(-50%);
}



.main-title {
    display: block;
    font-size: 56rpx;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
    margin-bottom: 20rpx;
}

.subtitle-banner {
    display: inline-block;
    background: linear-gradient(90deg, #ffeb3b, #ffc107);
    border: 4rpx solid #ffffff;
    border-radius: 40rpx;
    padding: 12rpx 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 235, 59, 0.4);
}

.subtitle {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
}

/* 九宫格抽奖区域 */
.lottery-section {
    position: relative;
    margin: 40rpx 30rpx;
    padding: 30rpx;
    background: linear-gradient( 161deg, #F8E195 0%, #FFC185 100%);
    box-shadow: 0rpx 18rpx 12rpx 2rpx rgba(174,98,12,0.17);
    border-radius: 48rpx 48rpx 48rpx 48rpx;

    .dot{
        width: 20rpx;
        height: 20rpx;
        position: absolute;
        border-radius: 50%;
        background: #F77924;
        &.active{
            background: #FFFBE5;
        }
    }

    /* 为 .dot 交替变色绑定动画 */
    .dot {
        animation: dot-animation 1s infinite alternate ;
    }

    .dot.active {
        animation: dot-active-animation 1s infinite alternate ;
    }

    @keyframes dot-animation {
        0% {
            background: #F77924;
        }
        100% {
            background: #FFFBE5;
        }
    }

    @keyframes dot-active-animation {
        0% {
            background: #FFFBE5;
        }
        100% {
            background: #F77924;
        }
    }
    
}



.lottery-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 8rpx;
    height: 650rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    border: 4rpx dashed #ff6b35;
    background: linear-gradient( 180deg, #EA984F 0%, #F5C56E 100%);
    box-shadow: inset 0rpx -6rpx 12rpx 2rpx #FF601A;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    border: 4rpx solid #FFDFA8;
}

.grid-item {
    position: absolute;
    aspect-ratio: 1;
    width: 186rpx;
    height: 186rpx;
    border-radius: 12rpx;
    background: #FFF6EB;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(234,67,29,0.31);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #F16325;
}

.grid-item.active {
    border: 4rpx solid #FFDFA8;
    background: linear-gradient( 180deg, #EA984F 0%, #F5C56E 100%);
}
.grid-item.active .prize-item {
    background: linear-gradient( 180deg, #EA984F 0%, #F5C56E 100%);
}



.grid-item:nth-child(1) {
    top: 20rpx;
    left: 20rpx;
}

.grid-item:nth-child(2) {
    top: 20rpx;
    left: 220rpx;
}

.grid-item:nth-child(3) {
    top: 20rpx;
    left: 420rpx;
}

.grid-item:nth-child(4) {
    top: 232rpx;
    left: 420rpx;
}

.grid-item:nth-child(5) {
    top: 444rpx;
    left: 420rpx;
}


.grid-item:nth-child(6) {
    top: 444rpx;
    left: 220rpx;
}


.grid-item:nth-child(7) {
    top: 444rpx;
    left: 20rpx;
}


.grid-item:nth-child(8) {
    top: 232rpx;
    left: 20rpx;
}


.grid-item:nth-child(9) {
    top: 232rpx;
    left: 220rpx;
}


.prize-item {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    background: #FFF6EB;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(234,67,29,0.31);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #F16325;
}

.prize-image {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 8rpx;
}

.prize-name {
    font-size: 24rpx;
    color: #F16325;
    text-align: center;
    line-height: 1.2;
}

.draw-button {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);

}

.draw-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.draw-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8rpx;
}

.draw-chances {
    font-size: 24rpx;
    color: #ffffff;
    opacity: 0.9;
}

.hand-icon {
    position: absolute;
    top: 30rpx;
    left: 42rpx;
    font-size: 32rpx;
    animation: wave 2s ease-in-out infinite;
    z-index: 999;
}

.highlight {
    position: absolute;
    width: calc(33.33% - 6rpx);
    height: calc(33.33% - 6rpx);
    background: rgba(255, 107, 53, 0.3);
    border: 4rpx solid #ff6b35;
    border-radius: 12rpx;
    z-index: 10;
    animation: pulse 0.5s ease-in-out infinite alternate;
}

/* 中奖记录区域 */
.prize-record {
    margin: 30rpx;
    padding: 30rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.record-title {
    font-size: 32rpx;
    color: #ff6b35;
    font-weight: bold;
}

.view-more {
    font-size: 24rpx;
    color: #ff6b35;
}

.record-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12rpx;
}

.record-item {
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
    border-radius: 12rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.record-image {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 8rpx;
}

.record-name {
    font-size: 22rpx;
    color: #333333;
    text-align: center;
}

/* 抽奖说明区域 */
.rules-section {
    margin: 30rpx;
    padding: 30rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.rules-title {
    font-size: 32rpx;
    color: #ff6b35;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.rule-item {
    display: flex;
    align-items: flex-start;
}

.rule-number {
    font-size: 28rpx;
    color: #ff6b35;
    font-weight: bold;
    margin-right: 8rpx;
    flex-shrink: 0;
}

.rule-text {
    font-size: 26rpx;
    color: #333333;
    line-height: 1.4;
}

/* 底部广告横幅 */
.ad-banners {
    margin: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.ad-banner {
    position: relative;
    height: 160rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.banner-1 {
    background: linear-gradient(135deg, #e53935, #d32f2f);
}

.banner-2 {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.banner-content {
    position: relative;
    z-index: 2;
    padding: 30rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8rpx;
}

.banner-subtitle {
    font-size: 24rpx;
    color: #ffffff;
    opacity: 0.9;
    margin-bottom: 8rpx;
}

.banner-desc {
    font-size: 20rpx;
    color: #ffffff;
    opacity: 0.8;
    margin-bottom: 12rpx;
}

.claim-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border: 2rpx solid #ffffff;
    border-radius: 20rpx;
    padding: 8rpx 16rpx;
    font-size: 22rpx;
    color: #ffffff;
    width: fit-content;
}

.date-range {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20rpx;
    padding: 6rpx 12rpx;
    font-size: 20rpx;
    color: #ffffff;
    width: fit-content;
}

.banner-decoration {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.gift-box-large {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(45deg, #ffd700, #ffb300);
    border-radius: 8rpx;
    position: relative;
}

.gift-box-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8rpx;
    background: #ffffff;
    transform: translateY(-50%);
}

.envelope {
    width: 80rpx;
    height: 60rpx;
    background: linear-gradient(45deg, #ffd700, #ffb300);
    border-radius: 8rpx;
    position: relative;
}

.envelope::before {
    content: '';
    position: absolute;
    top: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 40rpx solid transparent;
    border-right: 40rpx solid transparent;
    border-bottom: 20rpx solid #ffd700;
}

.close-ad {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    opacity: 0.7;
    z-index: 3;
}

/* 动画效果 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10rpx);
    }
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(10deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 中奖覆盖层样式 */
.prize-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background: rgba(0, 0, 0, 0.5);
    // background: url("https://admin.cqycgyl.com/uploads/rotate.gif") no-repeat center center;
    background-image: url('https://admin.cqycgyl.com/uploads/rotate.gif') center;
    background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，0.3为透明度 */
    background-blend-mode: overlay; /* 混合模式 */    
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.3s ease-out;
    
}


.overlay-content {
    width: 580rpx;
    background: linear-gradient(180deg, #FFE4CC 0%, #FFFFFF 100%);
    border-radius: 32rpx;
    padding: 60rpx 40rpx 40rpx;
    position: relative;
    animation: contentSlideUp 0.4s ease-out;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

/* 头像区域 */
.avatar-section {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
}

.user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 6rpx solid #ffffff;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* 彩带效果 */
.confetti {
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    animation: confettiFall 2s ease-in-out infinite;
}

.confetti-1 {
    background: #FF6B6B;
    top: -10rpx;
    left: 20rpx;
    animation-delay: 0s;
}

.confetti-2 {
    background: #4ECDC4;
    top: -5rpx;
    right: 15rpx;
    animation-delay: 0.3s;
}

.confetti-3 {
    background: #45B7D1;
    top: 10rpx;
    left: -10rpx;
    animation-delay: 0.6s;
}

.confetti-4 {
    background: #FFA07A;
    top: 15rpx;
    right: -5rpx;
    animation-delay: 0.9s;
}

/* 恭喜文字 */
.congratulations-text {
    text-align: center;
    margin-bottom: 30rpx;
}

.congrats-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333333;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

/* 奖品展示区域 */
.prize-display-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
}

.prize-main-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

/* 谢谢惠顾样式 */
.thank-you-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.thank-you-icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
    animation: bounce 1s ease-in-out infinite;
}

.thank-you-text {
    font-size: 36rpx;
    color: #666666;
    font-weight: 500;
}

/* 购物券样式 */
.coupon-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.coupon-amount {
    margin-top: 20rpx;
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    border-radius: 30rpx;
    padding: 16rpx 32rpx;
    box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.3);
}

.amount-text {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 实物奖品样式 */
.prize-section {
    display: flex;
    justify-content: center;
}

/* 前往兑换按钮 */
.redeem-button {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    border-radius: 50rpx;
    padding: 24rpx 0;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 20rpx rgba(255, 107, 53, 0.4);
    position: relative;
    overflow: hidden;
}

.redeem-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: buttonShine 2s infinite;
}

.redeem-text {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    display: block;
    position: relative;
    z-index: 1;
}

/* 兑换说明 */
.redeem-tip {
    text-align: center;
}

.tip-text {
    font-size: 24rpx;
    color: #999999;
    line-height: 1.4;
}

/* 动画效果 */
@keyframes overlayFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes contentSlideUp {
    0% {
        opacity: 0;
        transform: translateY(60rpx) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes confettiFall {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(20rpx) rotate(180deg);
        opacity: 0.8;
    }
}

@keyframes buttonShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10rpx);
    }
}

/* 页面抖动动画 */
@keyframes shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-10rpx, -8rpx);
    }
    20% {
        transform: translate(10rpx, 8rpx);
    }
    30% {
        transform: translate(-10rpx, 6rpx);
    }
    40% {
        transform: translate(10rpx, -6rpx);
    }
    50% {
        transform: translate(-8rpx, -10rpx);
    }
    60% {
        transform: translate(8rpx, 10rpx);
    }
    70% {
        transform: translate(-6rpx, 8rpx);
    }
    80% {
        transform: translate(6rpx, -8rpx);
    }
    90% {
        transform: translate(-4rpx, -6rpx);
    }
}

.lottery-page.shake {
    animation: shake 0.5s ease-in-out infinite alternate ;
}
</style>